<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
// 在单独构建的版本中辅助函数为 Vuex.mapState
import {mapState,mapGetters} from 'vuex'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created: function(){
    console.log('...............霸气分割线................')
    console.log(this.$store.state.count)
    console.log(this.$store.state.userInfo)

    console.log(this.count)

    console.log('.........Getters.............')
    console.log(this.userMale)
    console.log(this.userFemale)
    console.log(this.doneTodos) //1
    console.log(this.$store.getters.doneTodosNo)  //2
    console.log(this.doneTodosCount)

    console.log('...........Action..................')
    console.log(this.$store.state.userName)
    //this.$store.dispatch('getUserInfo','小紫')
    this.$store.dispatch({
      type:'getUserInfo',
      token:'小红'
    })
    console.log(this.$store.state.userName)
    
  },
  computed:{  //mapState 函数返回的是一个对象
    ...mapState([ //辅助函数// 使用对象展开运算符将此对象混入到外部对象中
      'count'
    ]),
    ...mapGetters([  // 使用对象展开运算符将 getter 混入 computed 对象中
      'doneTodos',
      'doneTodosNo',
      'doneTodosCount',
      'userMale',
      'userFemale'
    ])
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
